<script setup lang="ts">
import { markRaw, ref } from 'vue';

import { VbenSegmented } from '@vben-core/shadcn-ui';

import { WAction } from '@lowcode/components';
import { initBuilder } from '@lowcode/core';
import { NInput, useMessage } from 'naive-ui';

import JsBindAction from './JsBindAction.vue';

const { config } = initBuilder({
  message: useMessage(),
  pages:[
    { }
  ]
});

const code = ref('');

const formFields = ref([
  {
    label: '宽度',
    type: 'string',
    component: markRaw(NInput),
    value: '',
  },
  {
    label: '高度',
    type: 'string',
    component: markRaw(NInput),
    value: '',
  },
]);
</script>

<template>
  <div class="layout">
    <n-layout-header bordered show-trigger="arrow-circle" style="height: 60px"> 颐和园路 </n-layout-header>
    <n-layout :native-scrollbar="false" class="layout-body" content-class="h-full" has-sider>
      <n-layout-sider :native-scrollbar="false" :width="60" class="h-full" collapse-mode="width" content-class="layout-sider">
        <div class="toolbars">
          <div class="toolbar-item">
            <WAction icon="icon-[mdi--apps]" tooltip="组件列表" />
            <WAction icon="icon-[mdi--code]" tooltip="DSL编辑" />
          </div>
          <div class="toolbar-item">
            <WAction icon="icon-[mdi--apps]" tooltip="组件列表" />
            <WAction icon="icon-[mdi--code]" tooltip="DSL编辑" />
          </div>
          <div class="toolbar-item">
            <WAction icon="icon-[mdi--apps]" tooltip="组件列表" />
            <WAction icon="icon-[mdi--help]" tooltip="help帮助" />
          </div>
        </div>
      </n-layout-sider>
      <n-layout-sider :native-scrollbar="false" :width="280" bordered class="h-full" collapse-mode="width" content-class="layout-sider">
        <!--          <CodeEditor v-model="code1" language="json" />-->
      </n-layout-sider>
      <n-layout class="h-full">
        <n-layout-content class="flex-1" content-style="padding: 24px;">
          <n-card>
            <n-flex>
              <WAction icon="icon-[mdi--home]" title="弹窗标题" tooltip="弹窗标题" type="modal">
                <div>很好很好很好</div>
              </WAction>
              <WAction label="测试抽屉" round title="抽屉标题" type="drawer">
                <div>很好很好很好</div>
              </WAction>
            </n-flex>
          </n-card>
        </n-layout-content>
        <n-layout-footer bordered style="height: 60px"> 成府路 </n-layout-footer>
      </n-layout>
      <n-layout-sider :width="380" class="h-full" collapse-mode="width" content-class="layout-sider">
        <VbenSegmented v-model="config.tab" :tabs="config.tabs">
          <template #props>
            <n-form class="form-props" label-placement="left" label-width="auto">
              <template v-for="field in formFields">
                <n-form-item :label="field.label" class="label">
                  <div style="width: 160px">
                    <component :is="field.component" v-model:value="field.value" style="width: 100%" />
                  </div>
                  <JsBindAction :code="field.value" @change="(value: string) => (field.value = value)" />
                </n-form-item>
              </template>
            </n-form>
          </template>
        </VbenSegmented>
      </n-layout-sider>
    </n-layout>
  </div>
</template>

<style lang="scss" scoped>
.layout {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: flex-start;
  :deep(.layout-sider) {
    padding: 5px 5px;
    height: 100%;
    border-left: 1px solid var(--n-border-color);
  }
  .layout-body {
    width: 100%;
    height: 100%;
    flex: 1;
  }
  .toolbars {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: flex-start;
    text-align: center;
  }
  .toolbar-item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    height: 100%;
    &:last-child {
      justify-content: flex-end;
    }
  }
  .form-props {
    .label {
      :deep(label) {
        text-align-last: justify;
        text-align: justify;
      }
    }
  }
}
</style>
